<template>
  <div>
    <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed></van-nav-bar>
    <div class="line"></div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" offset="50" @load="onLoad"
      :immediate-check="false">
      <!-- native给组件内的根标签绑定原生的点击事件 -->
      <ArticleItem v-for="item in articleList" :key="item.art_id" :obj="item" :isShow="false" @click.native="jump(item.art_id)" />
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'SearchResult', // 组件缓存需要设置名字
  components: {
    ArticleItem: () => import('../../components/ArticleItem.vue')
  },
  data () {
    return {
      page: 1,
      articleList: [],
      loading: false,
      finished: false
    }
  },
  created () {
    this.getData()
  },
  methods: {
    onLoad () {
      if (this.articleList.length === 0) {
        this.loading = false
      } else {
        this.page += 1
        this.getData()
      }
    },
    async getData () {
      // 获取动态路由的值route没有s
      const { data: res } = await this.$api.searchApi({ page: this.page, q: this.$route.params.kw })
      // 拓展运算符拼接新老数据
      if (res.data.results.length !== 0) {
        this.articleList = [...this.articleList, ...res.data.results]
      } else {
        this.finished = true
      }
      this.loading = false
    },
    jump (e) {
      this.$router.push({
        path: `/ArticleDetail?art_id=${e}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-icon-arrow-left {
  color: #fff;
  font-size: 18px;
}

/deep/ .van-nav-bar__content {
  height: 54px;
}

.line {
  margin-bottom: 54px;
}
</style>
